<link rel="stylesheet" href="https://unpkg.com/swiper@8.4.7/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper@8.4.7/swiper-bundle.min.js"> </script>
<style>
.collections-sl-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.collections-sl-title {
    text-align: center;
    font-size: 30px;
    font-weight: 900;
    font-family: 'Open Sans';
    line-height: 1;
    padding: 20px 0 50px;
}

.collections-sl-swiper-container {
    width: 100%;
    margin-bottom: 40px;
    overflow: hidden;
}
.collections-sl-container .swiper-slide a {
    display: block;
    font-size: 0;
    color: #000;
    text-decoration: unset;
}

.collections-sl-swiper-slide:before{
    content: "";
    background-color: rgba(255, 255, 255, 0.1);
    display: block;
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .3s ease 0s;
    z-index: 1;
    pointer-events: none;
}
.collections-sl-swiper-slide:hover::before{
    left: 0;
}
.collections-sl-container .swiper-slide {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;    
}

.collections-sl-container .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.collections-sl-container .swiper-slide p {
    font-size: 16px;
    font-weight: bold;
    font-family: 'Open Sans';
}

.collections-sl-container .button-section {
    padding: 20px 0;
}

.collections-sl-container .button-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.collections-sl-container .category-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    /* background-color: #fff; */
    color: #333;
    text-decoration: none;
    font-weight: 600;
    border-radius: 2px;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    text-align: center;
    padding: 0 15px;
}

.collections-sl-container .category-button:hover {
    background-color: #f0f0f0;
}

.collections-sl-imhbox {
    position: relative;
}

@media (max-width: 1024px) {
    .collections-sl-container .swiper-slide p {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .collections-sl-swiper-container {
      height: 420px;
    }
    .collections-sl-container .swiper-slide{
      height: 200px;
    }
    .collections-sl-container .button-section {
        display: none;
    }
    .collections-sl-container .button-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .collections-sl-container .swiper-slide p {
        font-size: 1rem;
        bottom: 10px;
    }
}

@media (max-width: 480px) {
    .collections-sl-container .button-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
</style>

<div class="collections-sl-container">
    <div class="collections-sl-title">Customer Says</div>
    
    <div class="collections-sl-swiper-container swiper">
        <div class="swiper-wrapper">
            {% for block in section.blocks %}
             {% if block.type =='img' %}
             <div class="swiper-slide collections-sl-swiper-slide">
                <a href="{{block.settings.link}}">
                    <div class="collections-sl-imhbox">
                        <img src="{{block.settings.image | img_url: "master"}} " alt="Plus Size">
                    </div>
                    
                    <p>{{block.settings.title}}</p>
                </a>
            </div>
            {% endif %}
           {% endfor %}
        </div>
    </div>
    
    <!-- 按钮区域 -->
    <div class="button-section">
        <div class="button-grid">
           {% for block in section.blocks %}
             {% if block.type =='btn' %}
                <a href="{{block.settings.link}}" class="category-button">{{ block.settings.title }}</a>
             {% endif %}
           {% endfor %}
        </div>
    </div>
</div>

<script>
  
  var collectionsslswiper = new Swiper('.collections-sl-swiper-container', {
    slidesPerView: 3,
    grid: {
      fill: 'column',
      rows: 2,
    },
    breakpoints: {
        768: {
            slidesPerView: 4, 
            spaceBetween: 20,
            grid:null
        },
        480: {
            slidesPerView: 3, 
            spaceBetween: 15
        }
    }
  });

</script>
{% schema %}
{
  "name": "v1 collection list",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "our services",
      "label": "标题"
    }
  ],
  "blocks": [
    {
      "type": "img",
      "name": "图片",
      "settings": [
          {
        "type": "text",
            "id": "title",
            "label": "文案"
          },
          {
        "type": "url",
            "id": "link",
            "label": "链接"
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "图片"
          }
      ]
    },
    {
      "type": "btn",
      "name": "按钮",
      "settings": [
          {
        "type": "text",
            "id": "title",
            "label": "文案"
          },
          {
        "type": "url",
            "id": "link",
            "label": "链接"
          }
      ]
    }
  ],
  "presets": [
    {
      "name": "v1 collection list"
    }
  ]
}
{% endschema %}
